<template>
<div class="apply-success-container">
   <div class="apply-success-wrap">
      <div class="course-info apply-volunteer-course">
          <h3>{{detail.title}}</h3>
          <p>{{filterHtml(detail.description)}}</p>
      </div>
      <div class="course-info apply-info-sign">
          <h3>请填写报名信息</h3>
          <input type="text" v-model="name" placeholder="请输入姓名"/>
          <input type="number" v-model="phoneNumber" placeholder="请输入联系人手机号"/>
          <div class="tel-group">
            <input type="number" v-model="areacode" placeholder="区号如：021"/>
            <input type="number" v-model="contactTel" placeholder="请输入联系电话"/>
          </div>
          <div class="sex">
              <h6>请选择性别：</h6>
              <div class="box">
                 <label class="ui-radio">
                     <input type="radio" name="sex"  v-model="sex" value="0"/>
                     <div class="sign"></div>
                     男
                 </label>
              </div>
              <div class="box">
                 <label class="ui-radio">
                      <input type="radio" name="sex"  v-model="sex" value="1"/>
                      <div class="sign"></div>
                      女
                  </label>
              </div>
          </div>
          <div class="time">
               <h6>请选择时间(10:00AM-4:00PM)：</h6>
                <div class="box" v-for="item in weeks">
                  <label class="ui-checkbox">
                     <input type="checkbox" name="week"  v-model="item.checked" :value="item.value" />
                     <div class="frame"></div>{{item.label}}
                   </label>
                </div>
          </div>
          <textarea v-model="remarks" placeholder="备注："></textarea>
      </div>
      <div class="fixed-tools-wrap">
        <div class="fixed-tools">
          <button class="btn btn-primary signup-btn pull-right" @click="applyActivity()">立即报名</button>
        </div>
      </div>
   </div>
</div>

</template>

<script>
    import {FREEACTIVITY_DETAIL,FREEACTIVITY_APPLY} from '../../api';
    import utilsMixin from '../../mixins/utilsMixin';

    export default {
        mixins:[utilsMixin],
        data(){
            return{
              sex:0,
              week:0,
              name:'',
              phoneNumber:'',
              areacode:'',
              contactTel:'',
              remarks:'',
              areacode:'',
              query:this.$route.query,
              detail:{},
              weeks:[{
                value:0,
                label:'星期一'
              },
              {
                value:1,
                label:'星期二'
              },
              {
                value:2,
                label:'星期三'
              },{
                value:3,
                label:'星期四'
              },{
                value:4,
                label:'星期五'
              },{
                value:5,
                label:'星期六'
              },{
                value:6,
                label:'星期天'
              }]
            }
        },
        methods:{
          getActivityDetail(){
           this.$http.get(FREEACTIVITY_DETAIL,{
             freeactivity_id:this.$route.params.activityId
           })
           .then(res =>{
               if(res.data.code ==0){
                 this.detail = res.data.data;
               }else{
                 this.$toast.show(res.data.message);
               }
           })
          },
          applyActivity(){
           if(!this.name){
              return this.$toast.show('联系人不能为空');
           }else if(!(this.phoneNumber || this.contactTel)){
              return this.$toast.show('联系电话和手机不能都为空');
           }

           if(this.contactTel && !this.areacode){
              return this.$toast.show('区号不能为空');
           }

           let remarks = this.remarks.substr(3);
          
           let week = this.weeks.filter(item =>{
              return item.checked
           }).map(item => {
              return item.value;
           })

           this.$http.get(FREEACTIVITY_APPLY,{
             freeactivity_id:this.$route.params.activityId,
             contact_name:this.name,
             contact_phonenumber:this.phoneNumber,
             contact_tel:this.areacode+'-'+this.contactTel,
             sex:this.sex,
             week:JSON.stringify(week),
             remarks
           })
           .then(res =>{
               if(res.data.code ==0){
                 this.$router.go({
                   name:'activity_volunteer.success',
                   params:this.$route.params
                 })
               }else{
                 this.$toast.show(res.data.message);
               }
           })
          },
          addClick(val){
            console.log(val)
          }
        },
        ready(){
          this.getActivityDetail();
        },
        components:{

        }
    }
</script>
<style lang="sass">
     @import "../../sass/apply.scss";
</style>
